{{extend name="layout/base-html"}}

{{block name="body"}}
<style>
    .xm-form-select {
        width: 100%;
    }

    .xm-select .scroll-body {
        padding-left: 10px;
        overflow: hidden;
    }

    xm-select > .xm-body .xm-body-custom * {
        box-sizing: border-box;
    }

    /* icon 模块 */
    .icon-box {
        width: 100%;

        height: 210px;

        overflow-y: auto;
    }

    .icon-box ul {
        width: 100%;

        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;

        padding: 3px;
    }

    .icon__item {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-content: center;

        width: 60px;
        height: 60px;

        margin: 7px 0;
    }

    .icon__item--select {
        background: rgb(242, 242, 242);
    }

    .icon__item--hover {
        cursor: pointer;
        text-align: center;
    }

    .icon__item--hover:hover {
        background: rgb(242, 242, 242);
    }

    .icon__item i {
        font-size: 20px !important;

        padding-bottom: 8px;
    }

    .icon__item span {
        width: 100%;
        display: inline-block;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: #a8a2a2;
        font-size: 12px;
    }

    .icon--select {
        padding-right: 5px;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="title" class="layui-form-label"><span class="x-red">*</span>标题</label>
                <div class="layui-input-inline">
                    <input type="text" id="title" name="title" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{{$data.title|default=''}}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>icon</label>

                <div class="layui-input-inline">
                    <div id="icon"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="uri" class="layui-form-label"><span class="x-red">*</span>uri</label>
                <div class="layui-input-inline">
                    <input type="text" id="uri" name="uri" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{{$data.uri|default=''}}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>父级分类</label>

                <div class="layui-input-block">
                    <div id="cates" class="xm-form-select"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>选择角色</label>

                <div class="layui-input-block">
                    <div id="roles" class="xm-form-select"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>描述</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="请输入描述"
                              class="layui-textarea">{{$data.description|default=''}}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>

                <button class="layui-btn" lay-filter="{{$data ? 'edit' : 'add'}}" lay-submit="">
                    {{$data ? '修改' : '增加'}}
                </button>
            </div>
        </form>
    </div>
</div>

<script type="module">
    import {update, save} from "/static/admin/js/api/additional/admin-menu.js";
    import {rain} from "/static/admin/js/app.js";

    layui.use(['form', 'layer', 'transfer'], () => {
        let $ = layui.jquery,
            form = layui.form,
            transfer = layui.transfer;

        let event = '{{$data ? "edit" : "add"}}';

        // 监听事件
        formData(form, event, 'edit' === event ? {
            request: update,
            id: '{{$data.id|default=0}}',
        } : {
            request: save,
        });

        // 穿梭框
        (() => {
            // 权限列表
            let list = [];
            JSON.parse('{{$roles|raw}}').forEach(item => {
                list.push({value: item.id, title: item.name});
            });

            // 编辑选中的权限
            let initValue = '{{$data.roleIds|raw|default=""}}'.split(',');

            // 渲染
            let rulesSelect = xmSelect.render({
                ...rain.config.xmSelect,

                el: '#roles',
                content: "<div id='transfer'></div>",
                height: 'auto',
                direction: 'down',
                autoRow: true,
                initValue: initValue,
                data: list,
                name: 'roles',
                prop: {name: 'title'},
                layVerify: 'required',
                on: function (data) {
                    if (!data.isAdd) {
                        transfer.reload('transfer', {
                            value: rulesSelect.getValue('value')
                        })
                    }
                }
            });

            // 使用穿梭框组件
            transfer.render({
                id: 'transfer',
                elem: '#transfer',  //绑定元素
                title: ['未选角色', '已选角色'],
                data: list,
                value: initValue,
                width: "40%",
                onchange: function (data, index) {
                    if (index == 0) {
                        rulesSelect.append(data)
                    } else {
                        rulesSelect.delete(data)
                    }
                }
            });
        })();

        // 选择父级
        xmSelect.render({
            el: '#cates',
            model: {label: {type: 'text'}},
            radio: true,
            clickClose: true,
            tree: {
                show: true,
                strict: false,
                expandedKeys: [0],
            },
            height: 'auto',
            name: 'parent_id',
            data() {
                return JSON.parse('{{$menus|raw}}')
            }
        })

        // 处理 icon html
        let iconHtml = '', iconList = JSON.parse('{{$icons|raw}}'), multiple = 4,
            iconCode = '{{if $data}}{{$data.code|raw}}{{/if}}', scrollHeight = 0;
        iconList.forEach((item, i) => {
            if (item.code.toString() === iconCode) scrollHeight = Math.floor(i / multiple) * 74;

            iconHtml += `
                <li class="icon__item icon__item--hover ${item.code.toString() === iconCode ? 'icon__item--select' : ''}" data-icon="${i}">
                    <i class="iconfont">${item.code}</i>
                    <span>${item.name}</span>
                </li>
            `;
        });

        // 总数是否满足4的倍数
        let iconRemaining = multiple - (iconList.length % multiple === 0 ? multiple : iconList.length % multiple);
        while (iconRemaining > 0) {
            iconHtml += `<li class="icon__item"></li>`;
            iconRemaining--;
        }

        // 渲染icon
        let icon = xmSelect.render({
            el: "#icon",
            name: 'icon',
            initValue: JSON.parse('{{if $data}}{{$data.icon|raw}}{{else/}}[]{{/if}}'),
            content: `<div class="icon-box"><ul>${iconHtml}</ul></div>`,
            height: 'auto',

            model: {
                label: {
                    type: 'block',

                    //使用方块显示
                    block: {
                        //最大显示数量, 0:不限制
                        showCount: 0,
                        //是否显示删除图标
                        showIcon: true,
                        //自定义渲染label, 默认渲染name, 回调参数(item, sels)
                        template: (data, sels) => {
                            return `<i class="iconfont icon--select">${data.value}</i>${data.name}`;
                        },
                    },
                }
            },

            show: () => {
                setTimeout(() => $('.icon-box').scrollTop(scrollHeight), 1);
            }

        });


        // 点击icon获取结果
        $(".icon__item--hover").click(function () {
            let code = iconList[$(this).data('icon')].code;
            let values = icon.getValue();
            let has = values.find(item => {
                return item.value === code;
            });

            // 清除之前选中数据
            icon.delete(values);

            // 取消所有选中元素
            $('.icon__item--hover').removeClass('icon__item--select');

            // 上次未选中则添加
            if (!has) {
                icon.append([{name: $(this).children('span').text(), value: code}]);

                // 选中当前元素
                $(this).addClass('icon__item--select');
            }

            // 关闭下拉
            icon.closed();
        });
    });
</script>
{{/block}}
